<template>
    <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: 'verify' }">总览</el-breadcrumb-item>
        <el-breadcrumb-item>员工</el-breadcrumb-item>
        <el-breadcrumb-item>离职记录</el-breadcrumb-item>
      </el-breadcrumb>
      <el-card>
        <el-table
          ref="multipleTable"
          :data="list"
          :stripe="true"
          style="width: 100%"
        >
          <el-table-column
            prop="uid"
            label="序号"
            width="auto"
            align="center"
            :resizable="false"
            type="index"
            :index="indexMethod"
          >
          </el-table-column>
  
          <el-table-column
            prop="workid"
            label="工号"
            width="auto"
            align="center"
            :resizable="false"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.snumber }}</span>
            </template>
          </el-table-column>
  
          <el-table-column
            prop="name"
            label="姓名"
            width="auto"
            align="center"
            :resizable="false"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.sname }}</span>
            </template>
          </el-table-column>
          
          <!-- 职务 -->
          <el-table-column
            prop="job"
            label="前职务"
            width="auto"
            align="center"
            :resizable="false"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.preDuty }}</span>
            </template>
          </el-table-column>
  
          <!-- 公司 -->
          <el-table-column
            prop="username"
            label="前公司"
            width="auto"
            align="center"
            :resizable="false"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.preDep }}</span>
            </template>
          </el-table-column>

          <!--  -->
          <el-table-column
            prop="username"
            label="离职日期"
            width="auto"
            align="center"
            :resizable="false"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.date | timeFilter }}</span>
            </template>
          </el-table-column>
          
        </el-table>
      </el-card>
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          @current-change="currentChangeHandle"
          :current-page.sync="currentpage"
          :page-size="10"
          layout="total, prev, pager, next, jumper"
          :total="total"
          :page.sync="listQuery.page"
          :limit.sync="listQuery.limit"
        >
        </el-pagination>
      </div>
      
    </div>
  </template>
  
  <script>
  import { parseTime } from '../utils'
  export default {
    filters: {
      timeFilter(time) {
        return parseTime(time, '{y}-{m}-{d}')
      }
    },
    data() {
      return {
        listQuery: {
          page: 1,
          limit: 10,
        },
        list:null,
        downloadLoading:false,
        listLoading: true,
        total:0
      };
    },
    created() {
      this.getRecords();
    },
    methods: {
      getRecords() {
        const that = this;
        this.listLoading = true;
        this.$axios({
          method: "get",
          url: "/api/staff/leaveRecord",
          params: this.listQuery,
        }).then(function (res) {
          console.log(res)
          that.list = res.data.data;
          that.total = res.data.total;
          that.listLoading = false;
        });
      },
      
     
      
      //序号自增
      indexMethod(index) {
        return (this.listQuery.page - 1) * this.listQuery.limit + index + 1;
      },
    currentChangeHandle(val) {
        this.listQuery.page = val; // 改变默认的页数
        this.getRecords(); // 切换页码时，要获取每页显示的条数
        console.log(`当前页: ${val}`);
      },
      
    },
  };
  </script>
  
  <style>
  html,
  body {
    height: 100%;
  }
  .filter-container {
    display: flex;
    margin-bottom: 0.5rem;
  }
  </style>